<template>
	<view>
		<view class="up-img">
			<!-- <image src="/static/me/upimg.png" mode="" @click="choiceImg"></image> -->
			<image v-if="isDisable == false" @click="choiceImg" :src="image ? $IMG_URL+image : '/static/me/upimg.png'"
				mode=""></image>
			<image v-else :src="$IMG_URL+image" @click="getimgPreview($IMG_URL+ image)" mode=""></image>
			<view class="up-tet" v-show="isDisable == false">上传评证</view>
		</view>
		<view class="detail-bottom-btn" @click="keepInfo" v-show="isDisable == false">
			提交
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bill_id: '',
				image: '',
				isDisable: false
			}
		},
		onLoad(options) {
			this.bill_id = options.bill_id
			this.image = options.payment_image == 'null' ?  '' : options.payment_image 
			uni.setNavigationBarTitle({
				title: options.titles
			})
			if (options.titles == '查看支付凭证') {
				this.isDisable = true
				// this.seller_id = options.seller_id
				// // this.user_id = options.user_id == 'undefined' ? 0 : options.user_id
				// this.user_id = options.user_id
				// this.init()
			}
		},
		methods: {
			// 图片放大
			getimgPreview(img) {
				let imgList = []
				imgList.push(img)
				uni.previewImage({
					indicator: "number",
					loop: true,
					urls: imgList
				})
			},
			init() {
				if (this.seller_id == 0) {
					this.$http('other.getAccountDetailsByAdmin', {
						type: this.type //10=支付宝,20=微信,30=银行卡
					}, '获取中...').then(res => {
						if (res.code == 1) {
							if (res.data) {
								this.image = res.data.image
							}
						}
					})

				} else {
					this.$http('other.getAccountDetails', {
						type: 10, //10=支付宝,20=微信,30=银行卡
						user_id: this.user_id //	如果传递的话查询的时候传递的id 如果不传的话，查询的是自己id sellid
					}, '获取中...').then(res => {
						if (res.code == 1) {
							if (res.data) {
								this.image = res.data.image
							}
						}
					})
				}

			},
			// 提交
			keepInfo() {
				let that = this;
				if (!that.image) {
					uni.showToast({
						icon: 'none',
						title: '请上传凭证'
					})
					return
				}
				that.$http('other.uploadPayByBill', {
					bill_id: this.bill_id,
					image: this.image
				}, '提交中...').then(res => {
					if (res.code === 1) {
						uni.showToast({
							icon: 'none',
							title: '提交成功'
						})
						setTimeout(() => {
							uni.navigateBack({
								delta: 1
							})
						}, 1000)
					} else {
						uni.showToast({
							icon: 'none',
							title: '修改失败'
						})
					}
				});
			},
			// 上传图片
			choiceImg() {
				uni.showActionSheet({
					itemList: ['拍照', '从手机相册选择'],
					success: res => {
						switch (res.tapIndex) {
							case 0:
								uni.chooseImage({
									count: 1, //默认9
									sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
									sourceType: ['camera'], //从相册选择
									success: ress => {
										this.uploadUserImg(ress.tempFilePaths[0]);
									}
								});
								break;
							case 1:
								uni.chooseImage({
									count: 1, //默认9
									sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
									sourceType: ['album'], //从相册选择
									success: ress => {
										this.uploadUserImg(ress.tempFilePaths[0])
									}
								});
								break;
							default:
								break;
						}
					},
					fail: function(res) {
						console.log(res.errMsg);
					}
				});
			},
			// 裁剪完成后上传
			uploadUserImg(blob) {
				let that = this
				uni.showLoading({
					title: '上传中...'
				});
				uni.uploadFile({
					// 	Authorization: 'Bearer' + ' ' + uni.getStorageSync('token')
					url: that.$API_URL + '/common/upload',
					filePath: blob,
					name: 'file',
					header: {
						'token': uni.getStorageSync('token')
					},
					success: res => {
						uni.hideLoading();
						let imgData = JSON.parse(res.data)
						that.image = imgData.data.url
					},
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.up-img {
		width: 160rpx;
		height: 160rpx;
		margin: 20rpx 0 0 20rpx;

		image {
			width: 100%;
			height: 100%;
		}

		.up-tet {
			font-weight: 400;
			font-size: 24rpx;
			color: #999999;
			text-align: center;
			margin-top: 20rpx;
		}
	}

	.detail-bottom-btn {
		position: fixed;
		z-index: 200;
		bottom: 30rpx;
		width: 686rpx;
		height: 88rpx;
		background: linear-gradient(90deg, #6AAE2B 0%, #1B7E38 100%);
		font-weight: 500;
		font-size: 32rpx;
		color: #FFFFFF;
		line-height: 88rpx;
		text-align: center;
		left: 50%;
		transform: translate(-50%);
		border-radius: 50rpx;
	}
</style>